<template>
    <div>
        <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange">

        </el-upload>
            <el-button type="success" @click="submitUpload">上传到服务器</el-button>
            {{msg}}
    </div>
</template>
<script>
    export default {
        name: "test",
        data() {
            return {
                fileList: [],
                msg:"",
            };
        },
        methods: {
            /*重新选择的时候清楚原来的文件*/
            delFile() {
                this.fileList = [];
            },
            /*文件状态改变时的钩子函数*/
            handleChange(file, fileList) { //该方法很重要,从你选择的fileList文件赋值给你定义的this.fileList
                this.fileList = fileList;
            },
            /*单击上传到服务器(提交)按钮*/
            submitUpload() {
                let formData = new FormData(); //文件转换
                //fileList 对应你服务器接受名称
                formData.append("fileList", this.fileList[0].raw);
                //这边"$http"我重新封装了axios,你可以改成自己的.但是必须是post来请求,
                //http://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址
                //formData请求带的数据
                //{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的
                //最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对
                this.$axios.post('vaddrfileUpload.do', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(res => {
                    this.msg=res.data;
                    console.log(res)
                })
            }
        }
    };
</script>
<style scoped>
</style>